<!--
 * @Description:
 * @Author BPF
 * @create 2021/8/21 22:53
 -->
<template>
  <div class="compo">
    <div class="no-dialog">
      <div class="pt-20px pb-30px text-center w-full flex items-center title__wrap text-20px text-content font-bold">
        <!--        <img src="@/assets/images/logo-02.png" class="h-40" />-->
        后台管理系统模版
      </div>
      <!--      <el-tabs v-model="loginType" class="mb-5 mt-8">-->
      <!--        <el-tab-pane-->
      <!--          v-for="item in options.userType"-->
      <!--          :key="item.code"-->
      <!--          :label="item.name"-->
      <!--          :name="item.code"-->
      <!--        ></el-tab-pane>-->
      <!--      </el-tabs>-->

      <el-form ref="form" :model="form" label-width="80px" @keydown.enter.native="onLogin">
        <el-form-item label="">
          <el-input v-model="form.username" placeholder="输入账户用户名" class="input" clearable></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-input v-model="form.pass" placeholder="输入密码" class="input" type="password" clearable></el-input>
        </el-form-item>
      </el-form>
      <div class="text-subContent text-12 pb-12 flex justify-between px-2">
        <span>忘记密码</span>
      </div>
      <el-button class="comp_login" :loading="loginLoading" @click="onLogin">登录</el-button>
      <div class="text-subContent text-12 text-center pt-12 pb-25">
        Copyright &copy; 2021- {{ year }} {{ defaultSetting.application.name }} 版权所有
      </div>
    </div>
  </div>
</template>

<script>
import { sync } from 'vuex-pathify'
import api from '@/api/'
import md5 from 'js-md5'
import defaultSetting from '@/setting'
export default {
  props: {
    dialog: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      defaultSetting,
      loginLoading: false,
      loginType: '2',
      options: {
        userType: [
          { code: '3', name: '学生登录' },
          { code: '2', name: '老师登录' }
          // { code: '3', name: '学生' }
        ]
      },
      form: {
        username: '',
        pass: ''
      },
      dialogVisible: true,
      year: new Date().getFullYear()
    }
  },

  computed: {
    _userInfo: sync('user/info')
  },

  watch: {
    loginVisible_(newVal) {
      if (!newVal) {
        this.form = {
          username: '',
          pass: ''
        }
      }
    }
  },

  methods: {
    beforeClose() {},

    onLogin() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          if (this.form.username == 'admin' && this.form.pass == '123456') {
            this.$message.success('登录成功')
            this.$emit('login-success')
          } else {
            this.$message.error(`账号密码错误`)
          }
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.compo {
  .common__body {
    .title__wrap {
      position: relative;
      i {
        top: 50%;
        transform: translateY(-50%);
        position: absolute;
        right: 0;
        font-size: 20px;
        cursor: pointer;
      }
    }
    .el-tabs {
      .el-tabs__nav-scroll {
        display: flex;
        justify-content: center;
      }
      .el-tabs__nav-wrap {
        &::after {
          height: 0;
        }
        .el-tabs__item {
          font-size: 18px;
          line-height: 36px;
          height: 44px;
          padding-bottom: 14px;
          font-weight: 700;
          color: #787d82;
          &.is-active {
            color: $--color-primary;
          }
        }
        .el-tabs__active-bar {
          height: 6px;
          border-radius: 3px;
          left: 18px;
          width: 24px !important;
        }
      }
    }
    .el-form {
      .el-form-item__content {
        margin-left: 0 !important;
      }
    }
    .input {
      .el-input__inner {
        line-height: 48px;
        height: 48px;
        background: #eee;
        border: 1px solid #eee !important;
        border-radius: 8px;
        padding-left: 15px;
        font-size: 16px;
        color: $--color-title;
        &:focus {
          border: 1px solid $--color-primary;
          & + .el-input__prefix {
            i {
              color: $--color-primary !important;
            }
          }
        }
      }
      ::placeholder {
        color: $--color-sub-content;
        font-size: 16px;
      }
      .el-input__prefix {
        padding: 4px 0 0;
        width: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        i {
          font-size: 21px;
          color: $--color-sub-content;
        }
      }
      .el-input__clear {
        font-size: 18px;
        line-height: 48px;
        color: $--color-sub-content !important;
      }
    }
    .comp_login {
      height: 44px;
      line-height: 44px;
      background: $--color-primary;
      color: #fff;
      padding: 0;
      font-size: 16px;
      border-radius: 34px;
      width: 100%;
    }
  }

  ::v-deep .el-dialog {
    .el-dialog__header {
      display: none;
    }
    .el-dialog__body {
      padding: 0 30px 0;
      @extend .common__body;
    }
  }
  ::v-deep .no-dialog {
    @extend .common__body;
  }
}
</style>
